<template>
  <view :class="theme">
    <view class="tabs fd-row fixed bg-2">
      <label @click="switchTab(index)" v-for="(option, index) in options" :key="index"
        :class="[`color-${index === optionIndex ? `5` : `3`}`, `fs-28 f1 jc-center`]"
        style="transition: all 0.3s linear; line-height: 80rpx;">
        {{ option.text }}
      </label>
      <view class="absolute bottom-12 width-36 height-4 bg-5 br-6"
        :style="{ transition: `left 0.3s linear`, transform: `translateX(-50%)`, left: `calc(100% / ${options.length} / 2 + 100% / ${options.length} * ${optionIndex})`, }" />
    </view>
    <view class="bg-2 br-20" style="margin: 100rpx 20rpx 20rpx;">
      <view v-for="(item, index) in options[optionIndex].list" :key="item.log_sn || index"
        :style="{ borderTop: index ? `2rpx solid #f5f5f5` : `none` }" class="fd-row ai-center ml-30 mr-30 pt-20 pb-20">
        <view class="f1">
          <text class="ellipsis fs-28">{{ item.type || "-" }}</text>
          <text class="mt-10 fs-20 color-9">{{ item.create_at }}</text>
        </view>
        <text :class="`color-${{ 1: '5', 2: '15' }[item.change_type as '1' || '2']} fs-28`">
          {{ { 1: "+", 2: "" }[(item.state as 1 | 2) || 0] }}{{ item.coin || "0.00" }}
        </text>
      </view>
      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!options[optionIndex].list.length" :showLoading="false" width="400" height="400"
          class="mt-60 mb-30" src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="options[optionIndex].cache.status" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const { theme } = useMapState(["theme"]);
const options = reactive([
  {
    text: "全部",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "noMore"
    },
    next: false,
  },
  {
    text: "入账",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "noMore"
    },
    next: false,
  },
  {
    text: "出账",
    page: 0,
    limit: 20,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "noMore"
    },
    next: false,
  },
]);

const optionIndex = ref(0);

const switchTab = (index: number) => {
  if (index === optionIndex.value) return;
  optionIndex.value = index;
  const option = options[optionIndex.value];
  option.page = 0;
  option.cache = {
    page: 1,
    list: [] as any[],
    status: "noMore"
  };
  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  getData();
}

const billTypes = {
  energy: {
    api: "/energyLog",
    title: "能源"
  },
  coin: {
    api: "/coinLog",
    title: "星核"
  },
  honor: {
    api: "/honorLog",
    title: "贡献值"
  },
};
let billKey = Object.keys(billTypes)[0] as keyof typeof billTypes;
onLoad(({ type }: any) => {
  type && (billKey = type);
  getData();
  uni.setNavigationBarTitle({ title: `${billTypes[billKey].title}明细` })
});

const getData = () => {
  pager({
    url: billTypes[billKey].api,
    data: { status: optionIndex.value }
  }, options[optionIndex.value])
}

onReachBottom(() => getData());

</script>

<style lang="scss" scoped>
// scss
.tabs {
  left: var(--window-left);
  right: var(--window-right);
  top: var(--window-top);
}
</style>